<!Doctype html>
<html>
<head>
<title>audio</title>
<meta charset="utf-8" />
<style>
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, form, input, textarea, button, fieldset, img, legend, ul, ol, li, dl, dt, dd, th, td, div, a {
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
}
body{font: 12px/1.6 arial,helvetica,sans-serif;margin:0;padding:0;background:#EDEDED;}
.fYHei {font-family: "Microsoft YaHei","Microsoft JhengHei",STHeiti,Georgia;}
li{list-style:none;}
.head{color:#fff;text-align:center;}
#playList{width:450px;position:absolute;top:100px;left:50%;margin-left:-225px;display:none;
background: white;
border: 1px solid #ACACAC;
color: black;
position: absolute;
-webkit-box-shadow: rgba(0,0,0,.2) 0 4px 16px;
-moz-box-shadow: rgba(0,0,0,.2) 0 4px 16px;
box-shadow: rgba(0,0,0,.2) 0 4px 16px;
z-index: 1101;}
.p-l-H{
	font-size:14px;
	font-weight:400;
	padding:6px 10px;
	border-bottom: 1px solid #E5E5E5;
	position:relative;
}
.p-l-H .H-t{
	display:block;
}
.p-l-H .H-c{
	position:absolute;
	background: no-repeat -48px 0 url(http://ssl.gstatic.com/docs/picker/images/picker_sprite-v26.png);
	width: 15px;
	height: 15px;
	cursor:pointer;
	right:10px;
	top:50%;
	margin-top:-8px;
	opacity: .7;
}
.p-l-H .H-c:hover{
	opacity: 1;
}
.p-l-C{
	padding:10px 10px 30px;
}
.p-l-C li{
	border-bottom:1px solid #E5E5E5;
}
.p-l-C li a{
	color:#666;
	display:block;
	text-decoration:none;
	line-height:30px;
	position:relative;
	padding-left:10px;
}
.p-l-C li a:hover{
	color:#f60;
}
.p-l-C li a .playIco{
	display: block;
	background: url("http://www.xiami.com/res/img/default/msn/small_play_btn.png") no-repeat scroll 0 0;
	height: 16px;
	width: 16px;
	margin: 0 auto;
	position:absolute;
	right:10px;
	top:50%;
	top:8px;
}
.p-l-C li a .playIco:hover,.p-l-C li a .over{
	background-position:0 -16px;
}
.p-l-F{
	text-align:right;
	padding:6px 10px;
	color:#999;
}
#container{background:#fff;width:95%;margin:0 auto;}
#container #songList{margin:10px 20px 50px;}
#songList .current{background:#eee;}
#songList .current a{color:#f60;}
.tips{display:none;position:absolute;left:50%;margin-left:-56px;top:30px;font-size:16px;}
</style>
</head>
<body>
<!--
http://freshly-ground.com/data/audio/sm2/The%20Fugitives%20-%20Graffiti%20Sex.mp3
-->
<div id="container">
	<div class="tips">歌曲添加成功！</div>
	<ul class="p-l-C">
		<li><a href="javascript:;" onclick="play(0,this);" rel="http://freshly-ground.com/data/audio/sm2/The%20Fugitives%20-%20Graffiti%20Sex.mp3" title="The Fugitives - Graffiti Sex">The Fugitives - Graffiti Sex <span class="playIco"></span></a></li>
		<li><a href="javascript:;" onclick="play(4646,this);" rel="http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/sound/glass0.mp3" title="2">2 <span class="playIco"></span></a></li>
		<li><a href="javascript:;" onclick="play(99,this);" rel="http://www.schillmania.com/projects/soundmanager2/demo/_mp3/coins.mp3" title="3">3<span class="playIco"></span></a></li>
		<li><a href="javascript:;" onclick="play(232,this);" rel="http://www.schillmania.com/projects/soundmanager2/demo/_mp3/walking.mp3" title="walking">walking<span class="playIco"></span></a></li>
		<li><a href="javascript:;" onclick="play(22,this);" rel="http://www.schillmania.com/projects/soundmanager2/demo/_mp3/rain.mp3" title="rain">rain<span class="playIco"></span></a></li>
	</ul>
</div>
<div id="playList">
	<h2 class="p-l-H">
		<span class="H-t">播放列表</span>
		<a href="javascript:void(0);" onclick="hidePlayList()" class="H-c"></a>
	</h2>
	<ul id="songList" class="p-l-C">

	</ul>
	<div class="p-l-F"><a id="c-L" title="清除播放列表" href="javascript:void(0);" onclick="cSong();">清除播放列表</a></div>
</div>
<script type="text/javascript" src="http://flyxiang.org/dev/project/cwAdmin/js/cw.min.js"></script>
<script>

//
function _$$(id){
	return document.querySelector('#'+id);
}

//显示播放列表
function showPlayList(){
	_$$("playList").style.display = 'block';
};

//隐藏播放列表
function hidePlayList(){
	_$$("playList").style.display = 'none';
};

//清除播放列表
function cSong(){
	top.frames['playerFrame'].clearSong();
	songList = [];
	songwrap.innerHTML = '';

};
var songList = [];
var songwrap = _$$("songList");

//为当前播放添加状态
function list_init(id){
	$('#songList').find('li').attr('class', '');
	$('#songList #song'+id).attr('class', 'current');
};

function getid(){
	return $('.current').attr('data-id');
};

//播放当前歌曲
function play(id,self){
	var tt = self.title;
	var url = $(self).attr('rel');
	var listLength = songList.length;
	var Hlist = '';
	top.frames['playerFrame'].playSong(id,tt,url);
	//检查歌曲重复
	
	if(listLength > 0){
		list_init(id);
		for (var i = 0; i<listLength; i++ )
		{
			if(id == songList[i].sid){return false;}
		}
	}
		songList.push({sid:id, name:tt, src:url});
		for(var j = 0; j <= listLength; j++){
			Hlist += '<li id="song'+songList[j].sid+'"data-id="'+j+'"><a href="javascript:;" onclick="play('+songList[j].sid+',this);" rel="'+songList[j].src+'" title="'+songList[j].name+'">'+songList[j].name+'<span class="playIco"></span></a></li>';
		}
		songwrap.innerHTML = Hlist;
		list_init(id);
		//console.log('歌曲添加成功！');
		$('.tips').fadeIn();
		setTimeout("$('.tips').fadeOut();", 1000);
		
};
</script>
</body>
</html>






















